<style lang="less">
.upload-image .el-upload--picture-card{
	background: transparent;
	.el-icon-plus{
		color: #fff;
	}
	
}
</style>
<template>
	<div class="comp-new">
		<el-form ref="newForm" :model="newForm" :label-width="150+'px'">
            <el-form-item label="设备编号：">{{activeDeviceNumbers.join(',')}}</el-form-item>
            <!-- <el-form-item label="宽度：" prop="width" :rules="[{ required: true, message: '请输入宽度' },{type:'number',message:'宽度须为数字'}]">
                <el-input placeholder="请输入" v-model.trim.number="newForm.width" style="width:100px"></el-input> px
            </el-form-item>
            <el-form-item label="高度：" prop="height" :rules="[{ required: true, message: '请输入高度' },{type:'number',message:'高度须为数字'}]">
                <el-input placeholder="请输入" v-model.trim.number="newForm.height" style="width:100px"></el-input> px
            </el-form-item>
            <el-form-item label="音量：" v-if="type=='video'"  prop="volume" :rules="[{type:'number',message:'音量须为数字'}]">
		    	<el-input placeholder="请输入" v-model.trim.number="newForm.volume"></el-input>
		  	</el-form-item> -->
            <el-form-item label="选择视频：" v-if="type=='video'"  prop="fileName" :rules="[{ required: true, message: '请选择视频' }]">
		    	<!-- <el-select v-model="newForm.fileName" placeholder="请选择">
					<el-option
						v-for="item in videoList"
						:key="item.id"
						:label="item.name"
						:value="item.name">
					</el-option>
				</el-select> -->
				<el-button type="green" @click="chooseVideo">选择</el-button>
				<p v-if="newForm.fileName">已选视频：{{newForm.fileName}}</p>
		  	</el-form-item>
            <template v-else-if="type=='text'">
                <el-form-item label="字幕特技：" prop="stuntType" :rules="[{ required: true, message: '请选择字幕特技' }]">
                    <!-- <el-input placeholder="请输入" v-model.trim="newForm.stuntType"></el-input> -->
					<el-select v-model="newForm.stuntType" placeholder="请选择">
						<el-option
							v-for="item in stuntType"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
                </el-form-item>
                <el-form-item label="文本内容：" prop="content" :rules="[{ required: true, message: '请输入文本内容' }]">
                    <el-input placeholder="请输入" v-model.trim="newForm.content"></el-input>
                </el-form-item>
                <el-form-item label="停留时间：" prop="stayTime" :rules="[{ required: true, message: '请输入停留时间' },{type:'number',message:'停留时间须为数字'}]">
                    <el-input placeholder="请输入" v-model.trim.number="newForm.stayTime" style="width:100px"></el-input> 秒
                </el-form-item>
                <el-form-item label="特技速度：" prop="stuntSpeed" :rules="[{ required: true, message: '请选择特技速度' }]">
                    <el-select v-model="newForm.stuntSpeed" placeholder="请选择">
						<el-option
							v-for="item in 16"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="字幕特技：" prop="stuntType" :rules="[{ required: true, message: '请选择字幕特技' }]">
                    <!-- <el-input placeholder="请输入" v-model.trim="newForm.stuntType"></el-input> -->
					<el-select v-model="newForm.stuntType" placeholder="请选择">
						<el-option
							v-for="item in stuntType"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
                </el-form-item>
                <el-form-item label="选择图片：" prop="pictures" :rules="[{ required: true, message: '请选择图片' }]">
					<el-button type="green" @click="chooseImage">选择</el-button>
					<div v-if="selectedImgs.length>0">已选图片：
						<span v-for="(item,index) in selectedImgs" :key="index">{{item.fileName}} <span v-if="index<selectedImgs.length-1">，</span></span>
					</div>
				</el-form-item>
                <el-form-item label="停留时间：" prop="stayTime" :rules="[{ required: true, message: '请输入停留时间' },{type:'number',message:'停留时间须为数字'}]">
                    <el-input placeholder="请输入" v-model.trim.number="newForm.stayTime" style="width:100px"></el-input> 秒
                </el-form-item>
                <el-form-item label="特技速度：" prop="stuntSpeed" :rules="[{ required: true, message: '请选择特技速度' }]">
                    <el-select v-model="newForm.stuntSpeed" placeholder="请选择">
						<el-option
							v-for="item in 16"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
                </el-form-item>
            </template>
			<el-form-item label="起始日期：">
		    	<el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
		  	</el-form-item>
			<el-form-item label="起始时间：">
		    	<el-time-picker
                    is-range
                    v-model="timeRange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    start="08:00"
                    end="18:00">
                </el-time-picker>
		  	</el-form-item>
		</el-form>
		<!-- 已上传视频 start -->
        <el-dialog v-if="videoModalVisible" 
			title="已上传视频" :visible.sync="videoModalVisible"
			width="800px" :close-on-click-modal="false"
			:close-on-press-escape="false" destroy-on-close append-to-body>
            <el-table 
                :data="videoList" 
                style="width: 100%;"
                v-loading="loading">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="createtime" label="上传时间"> </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="green" @click="doChooseVideo(scope.row)">选择</el-button>
                        <el-button type="danger" :loading="deleting" @click="deleteMedia(scope.row,2)" v-if="hasPermission('013002006001')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 已上传视频 end -->
		<!-- 已上传图片 start -->
        <el-dialog v-if="imageModalVisible" 
			title="已上传图片" :visible.sync="imageModalVisible"
			width="800px" :close-on-click-modal="false"
			:close-on-press-escape="false" destroy-on-close append-to-body>
			<p>已选择{{selectedImgs.length}}张图片，请选择第{{selectedImgs.length+1}}张图片</p>
            <el-table 
                :data="videoList" 
                style="width: 100%;"
                v-loading="loading"
				@selection-change="handleImageChange">
				<el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="createtime" label="上传时间"> </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="danger" :loading="deleting" @click="deleteMedia(scope.row,1)" v-if="hasPermission('013002007001')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button type="primary" @click="doChooseImage">确定</el-button>
            </div>
        </el-dialog>
        <!-- 已上传图片 end -->
	</div>	
</template>
<script>
import Location from '@/components/census/record/Location.vue'
export default {
	name: 'newEquipment',
	components: {
		Location
	},
	props: {
		activeDevice: {
			type: Object,
			default(){
				return null
			},
		},
		activeDeviceNumbers: {
			type: Array,
			default(){
				return []
			},
		},
		type: {
			type: String,
			default: 'text'
		}
	},
	watch: {
		timeRange (val) {
			this.newForm.startTime = val[0].substr(-8)
			this.newForm.stopTime = val[1].substr(-8)
		},
		dateRange (val) {
			this.newForm.startDate = val[0]
			this.newForm.stopDate = val[1]
		}
	},
	data () {
		return {
			newForm: {
                width: 100,
                height: 100,
                startTime: '',
                stopTime: '',
                startDate: '',
                stopDate: '',
				stuntType: 52,
				stuntSpeed:1,
				fileName:''
            },
			loading: false,
            timeRange:[],
            dateRange: [],
			stuntType:[{
				id: 2,
				name:'静止显示'
			},{
				id: 50,
				name:'平滑向上推入'
			},{
				id: 51,
				name:'平滑向下推入'
			},{
				id: 52,
				name:'平滑向左推入'
			},{
				id: 53,
				name:'平滑向右推入'
			}],
			videoList:[],
			videoModalVisible: false,
			deleting: false,
			imageModalVisible: false,
			selectedImgs: []
		}
	},
	methods: {
		getUploadedList (type) {
			this.$get('/fireFightingIOT/LEDScreen/getLedUploadFileList').then(res=>{
				this.videoList = res.data.filter(item=>{
					return item.type==type
				})
			})
		},
		chooseVideo () {
			this.videoModalVisible = true
			this.getUploadedList(2)
		},
		handleImageChange (val) {
			this.selectedImgs = val.map((item,index) => {
				return {
					fileName: item.name,
					order: index+1
				}
			})
		},
		doChooseVideo (item) {
			this.newForm.fileName = item.name
			this.videoModalVisible = false
		},
		chooseImage () {
			this.imageModalVisible = true
			this.getUploadedList(1)
		},
		doChooseImage (item) {
			this.imageModalVisible = false
			this.$set(this.newForm,'pictures',this.selectedImgs)
		},
		deleteMedia (item,type) {
            this.showConfirm('您确定要删除该数据吗？',()=>{
                this.deleting = false
                this.$post('/fireFightingIOT/LEDScreen/delFile',{
                    id: item.id
                }).then(res=>{
                    this.deleting = false
                    this.$message.success('删除成功')
                    this.getUploadedList(type)
                },err=>{
                    this.deleting = false
                    this.$message.error(err.msg)
                })
            })
            
        },
		submitAction () {
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					let params = Object.assign({number: this.activeDeviceNumbers.join(',')},this.newForm)
					let url = ''
					switch (this.type) {
						case 'video':
							url='/fireFightingIOT/LEDScreen/publishVideo'
							break
						case 'image':
							url="/fireFightingIOT/LEDScreen/publishPicture"
							break
						default:
							url="/fireFightingIOT/LEDScreen/publishTextXML"
							break

					}
					this.$emit('submitting')
                    this.$ajax({
						url: url,
						method: 'post',
						data: params
					}).then( data => {
						this.$emit('success',data);
					}, error => {
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
		},
		cancelAction () {
			this.$emit('cancel');
		}
	},
	created () {
		// this.getVideoList()
        this.timeRange = ['','']
        if(this.type=='text'){
            this.newForm.stuntType = 52
        }
	},
}
</script>